<template>
  <div class="container">
    <video preload="" src="@/assets/login/loginVideo.mp4" muted="muted" autoplay="autoplay" loop="loop"
      class="bg-login"></video>
    <div class="title bg-login" style="white-space: nowrap">
      数字治理平台
    </div>
    <div class="login-form" @keyup.enter="handleLogin">
      <div class="login-form-box">
        <div class="login-form-item">
          <div class="login-form-item-label">账号</div>
          <div class="login-form-item-input el-input el-input--suffix">
            <input v-model="loginForm.loginId" type="text" autocomplete="off" placeholder="请输入账号" maxlength="30"
              tabindex="1" class="el-input__inner" />
          </div>
        </div>
        <div class="login-form-item">
          <div class="login-form-item-label">密码</div>
          <div class="login-form-item-input el-input el-input--suffix">
            <input v-model="loginForm.loginPwd" type="password" autocomplete="off" placeholder="请输入密码" maxlength="30"
              tabindex="2" class="el-input__inner" />
          </div>
        </div>
        <!-- <div class="login-form-item">
          <span class="register">点击注册</span>
      </div> -->
      </div>
      <div class="login-submit" ref="loginButton" @click="handleLogin">
        登录
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { login } from "@/api/login";
import Schema from "async-validator";

const router = useRouter();

const loginForm = reactive({
  loginId: "",
  loginPwd: "",
});
const handleLogin = async () => {
  const validator = new Schema(rule);
  try {
    const result = await validator.validate(loginForm);
    await login(loginForm);
    ElMessage.success('登录成功')
    router.push({ name: 'homePage' });
  } catch (err) {
    if (err.code === 500) {
      ElMessage.error(err.msg)
    } else {
      ElMessage.error('登录失败')
    }
  }
};
const rule = {
  loginId: {
    type: "string",
    required: true,
    message: "请输入账号",
  },
  loginPwd: {
    type: "string",
    required: true,
    message: "请输入密码",
  },
};

</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}

.bg-login {
  position: absolute;
  object-fit: fill;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.title {
  width: 33.25vw;
  height: 2.083333vw;
  line-height: 2.083333vw;
  font-size: 2.083333vw;
  font-family: homeTime;
  color: #fff;
  letter-spacing: 0.260417vw;
  text-shadow: 0 -0.208333vw 0.416667vw #54e5fc;
  text-align: center;
  top: 11.458333vw;
  left: calc(50% - 15.625vw);
  position: absolute;
  z-index: 1;
}

.login-form {
  width: 29.375vw;
  height: 18.541667vw;
  background: url("../../assets/login/loginFormbody.png") 50% no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 14.322917vw;
  left: calc(50% - 14.6875vw);
}

.login-form .login-form-box {
  width: 17.604167vw;
  height: 15vw;
  position: absolute;
  top: 1vw;
  left: 6vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-form .login-form-box .login-form-item-label {
  height: 1.145833vw;
  line-height: 1.145833vw;
  font-size: 0.833333vw;
  color: #fff;
  text-align: left;
  margin-bottom: 0.520833vw;
  line-height: 2;
}

.el-input {
  position: relative;
  font-size: 0.729167vw;
  display: inline-block;
  width: 100%;
}

.el-input__inner {
  outline: 0;
  padding: 0 0.78125vw;
  /* transition: border-color 0.2scubic-bezier (0.645, 0.045, 0.355, 1); */
  width: 100%;
  border-radius: 0.208333vw;
  border: 1px solid #dcdfe6;
  appearance: none;
}

.el-input--suffix .el-input__inner {
  padding-right: 1.5625vw;
}

.login-form .login-form-box .login-form-item-input .el-input__inner {
  line-height: 1.875vw;
  height: 1.875vw;
  background: rgba(0, 130, 255, 0.16);
  font-size: 1vw;
  border-color: #54e5fc;
  color: #fff;
  width: 100%;
}

.login-form-item-input .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.login-form .login-submit {
  width: 13.020833vw;
  height: 2.1875vw;
  line-height: 2.1875vw;
  text-align: center;
  font-size: 0.833333vw;
  letter-spacing: 0.104167vw;
  color: #fff;
  background: url("../../assets/login/loginButton.png") 50% no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  position: absolute;
  bottom: 0.364583vw;
  left: 8.177083vw;
  transition: all .3s ease;
}

.login-form .login-submit:hover {
  transform: scale(0.9);
}

.error-message {
  color: #ff4949;
  font-size: 0.625vw;
  margin-top: 0.260417vw;
  height: 0.833333vw;
  line-height: 0.833333vw;
}

.login-form-item {
  margin-bottom: 1.041667vw;
}

.register {
  color: #fff;
  text-decoration: none;
  display: block;
  text-align: right;
  cursor: pointer;
  font-size: 0.7vw;
}
</style>
